<template>
  <div id="tool-wrapper" :style="{ right: isManage ? '1%' : '30%' }">
    <div
      class="tool-item"
      v-for="item in tools"
      :title="item.title"
      :key="item.title"
    >
      <a-popover
        v-if="item.title === '图层控制'"
        placement="leftTop"
        :trigger="'click'"
        :open="popoverVisible"
        @openChange="handleOpenChange"
        :align="{ offset: [-10, 0] }"
      >
        <template #content>
          <LineController />
        </template>
        <i
          :class="['iconfont', item.icon, disabled ? 'disabled-icon' : '']"
        ></i>
      </a-popover>
      <i
        :class="['iconfont', item.icon]"
        v-else
        @click="handleIconClick(item)"
      ></i>
    </div>
  </div>
</template>

<script setup>
import * as Cesium from 'cesium';
import toolList from './toolLists';
import { ref, onMounted, render, onBeforeUnmount } from 'vue';
import { watchLineData, useLineData } from '@/store';
import {
  coneWithLight,
  renderAll,
  renderStation,
} from '@/cesiumTools/LineMaterial/effectController';
import LineController from './LineController.vue';
import PositionStatusBar from './positionStatusBar';
import { flyToDefaultView } from '@/cesiumTools/sceneManager';

const tools = ref(toolList);
const disabled = ref(false);
const isManage = ref(false);
const lineDataStore = useLineData();
// 🟢在toolBar组件中渲染全部的场景
const lineData = ref(null);
onMounted(async () => {
  const viewer = await watchLineData('setViewer');
  const lineData = await watchLineData('setData');
  // console.log(viewer)
  console.log(lineData);
  // console.log(viewer.scene.context.maximumVertexTextureImageUnits);为 undefined 表明你的设备或浏览器的 WebGL 环境不支持顶点纹理
  renderAll(viewer, lineData);

  positionBar.value = new PositionStatusBar(lineDataStore.viewer);
  positionBar.value.show();
});
// 禁用图层管理
lineDataStore.$onAction(({ name, store, args, after, onError }) => {
  if (name === 'disableController') {
    after((res) => {
      disabled.value = lineDataStore.isDisable;
    });
  }
});

// 鼠标位置
const positionBar = ref(null);
const showPosition = ref(true);

// 鼠标位置点击处理函数
const showMousePosition = () => {
  if (!positionBar.value) {
    // 第一次点击，创建实例
    positionBar.value = new PositionStatusBar(lineDataStore.viewer);
    showPosition.value = false;
  } else {
    // 后续点击，切换显示/隐藏
    if (showPosition.value) {
      positionBar.value.hide();
    } else {
      positionBar.value.show();
    }
    showPosition.value = !showPosition.value;
  }
};
// 添加全屏切换方法
const toggleFullScreen = () => {
  if (!document.fullscreenElement) {
    // 进入全屏
    document.documentElement.requestFullscreen().catch((err) => {
      console.error(`Error attempting to enable fullscreen: ${err.message}`);
    });
  } else {
    // 退出全屏
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
  }
};
// 影像切换
const isImageryVisible = ref(true);

/* 鼠标位置函数和全屏控件函数 */
const handleIconClick = (item) => {
  if (item.title === '鼠标位置') {
    showMousePosition();
  }
  if (item.title === '全屏控件') {
    toggleFullScreen();
  }
  if (item.title === '复位控件') {
    flyToDefaultView(lineDataStore.viewer);
  }
  if (item.title === '影像切换') {
    isImageryVisible.value = !isImageryVisible.value;
    // console.log(lineDataStore.viewer); //可以拿到viewer
    const imageryLayers = lineDataStore.viewer.imageryLayers;
    // console.log('ImageryLayers:', imageryLayers);
    // console.log('Layers length:', imageryLayers.length);//可以拿到2个图层
    // 假设索引0是腾讯底图，索引1是影像地图
    const tencentLayer = imageryLayers.get(0);
    const imageryLayer = imageryLayers.get(1);
    if (isImageryVisible.value) {
      // 显示影像地图，隐藏腾讯底图
      tencentLayer.show = false;
      imageryLayer.show = true;
      console.log('Switched to imagery map');
    } else {
      // 显示腾讯底图，隐藏影像地图
      tencentLayer.show = true;
      imageryLayer.show = false;
      console.log('Switched to Tencent map');
    }
  }
};
</script>

<style scoped>
:global(.ant-popover-inner) {
  background-color: rgba(0, 0, 0, 0.3) !important;
  padding: 0 !important;
}
#tool-wrapper {
  position: absolute;
  right: 28% !important;
  bottom: 10%;
  display: flex;
  flex-direction: column;
  z-index: 199;
}

.tool-item {
  margin: 4px;
  pointer-events: all;
  cursor: pointer;
}
#tool-wrapper :deep(.iconfont) {
  height: 35px !important;
  width: 35px !important;
}

.tool-item:hover {
  background-color: #d8951a7f;
}

#tool-wrapper i {
  color: #ffd31a;
  border: 1px solid #d8951a;
  padding: 3px;
}

#tool-wrapper span {
  color: #fff;
}

.disabled-icon {
  pointer-events: none;
  cursor: none;
  background-color: rgba(204, 204, 204, 0.306);
}

.disabled-icon:hover {
  cursor: none;
}
/* :deep() 选择器没有生效 , 原因是在 PositionStatusBar中动态添加的 */
:global(.position-bar) {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.3),
    rgba(0, 24, 47, 0.3)
  );
  color: #00ffff;
  padding: 12px 30px;
  border-radius: 4px;
  font-size: 15px;
  z-index: 999;
  min-width: 150px;
  border: 1px solid #d8951a;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.1);
  backdrop-filter: blur(4px);

  /* 添加斜角装饰 */
  clip-path: polygon(
    0 0,
    calc(100% - 10px) 0,
    100% 10px,
    100% 100%,
    10px 100%,
    0 calc(100% - 10px)
  );
}
</style>
